{extend name="admin@public/popup_form"}

{block name="style"}
{__block__}
<link rel="stylesheet" href="__STATIC__/library/jstree/themes/default/style.css" media="all">
{/block}

{block name="form"}
<input type="hidden" value="{$id}" id="id" name="row[id]" />
    <div class="layui-form-item">
        <label class="layui-form-label">父级</label>
        <div class="layui-input-block">
            <select id="pid" name="row[pid]">
                <option value="0">------请选择------</option>
                {foreach $role_list as $key=>$vo}
                <option value="{$vo.id}" {if $vo['id']==$pid}selected="selected"{/if}>{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" name="row[name]" value="{$name}" lay-verify="required" placeholder="请输入角色名" class="layui-input" lay-verType="tips">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限设置</label>
        <div class="layui-input-block">
            <input type="checkbox" title="全选" lay-filter="checkall">
            <input type="checkbox" title="展开" lay-filter="expandall">

            <div id="treeview"></div>
            <input type="hidden" name="row[menu_ids]" id="node_list" />
        </div>
    </div>
{/block}

{block name="script"}
<style>
    #treeview .jstree-container-ul .jstree-node {
        display: block;
        clear: both;
    }

    #treeview .jstree-leaf:not(:first-child) {
        float: left;
        background: none;
        margin-left: 0;
        width: 80px;
        clear: none;
    }

    #treeview .jstree-leaf {
        float: left;
        margin-left: 0;
        padding-left: 24px;
        /*width: 100px;*/
        clear: none;
        color: #777;
    }

    #treeview .jstree-leaf > .jstree-icon,#treeview .jstree-leaf .jstree-themeicon {
        display: none;
    }

    #treeview .jstree-last {
        background-position: -292px -4px;
        background-repeat: repeat-y;
    }

    #treeview .jstree-children:before,#treeview .jstree-children:after {
        content: " ";
        display: table;
    }

    #treeview .jstree-children:after {
        clear: both;
    }

    #treeview .jstree-themeicon {
        display: none;
    }
</style>
{__block__}
<script src="__STATIC__/library/jstree/jstree.js" charset="utf-8"></script>
<script>
    const node_list = {:json_encode($node_list)};

    $('#treeview')
        .on("changed.jstree", function (e, data) {
            $('#node_list').val(data.selected.join(','));
        })
        .jstree(
            {
                "themes": {"stripes": true},
                "checkbox": {
                    "keep_selected_style": false,
                },
                "plugins": ["checkbox", "types"],
                "core": {
                    'check_callback': true,
                    "data": node_list
                }
            }
        );

    layui.use(['layTp'],function() {
        layui.form.on('checkbox(checkall)',function(){
            $("#treeview").jstree($(this).prop("checked") ? "check_all" : "uncheck_all");
        });

        layui.form.on('checkbox(expandall)',function(){
            $("#treeview").jstree($(this).prop("checked") ? "open_all" : "close_all");
        });
    });
</script>
{/block}